<template>
  <Dialog
    v-model="show"
    :title="t('system_log.日志详情')"
    width="700px"
    @confirm="handleConfirm"
    @close="handleClose"
  >
    <div class="overflow-y-auto" style="height: 500px">
      <div v-for="item in list" class="mb16" :key="item.prop">
        <div class="label color-000000">{{ item.label }}：</div>
        <div class="color-666666">{{ props.data[item.prop] || "-" }}</div>
      </div>
    </div>
  </Dialog>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import Dialog from "@/components/dialog.vue";
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n();
const show = defineModel("show", {
  type: Boolean,
  default: false,
});
const emit = defineEmits(["update:show", "refresh"]);
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  logType: {
    type: Number,
    default: 1,
  },
});
const list = computed(() => {
  const list = [
    { label: t("system_log.业务描述"), prop: "description" + locale.value },
    { label: t("system_log.ip"), prop: "requestIp" },
    { label: t("system_log.日志类型"), prop: "logType" },
    { label: t("system_log.处理时间"), prop: "time" },
    { label: t("system_log.用户名"), prop: "username" },
    { label: t("system_log.用户昵称"), prop: "nickName" },
    { label: t("system_log.浏览器"), prop: "browser" },
    { label: t("system_log.方法"), prop: "method" },
    { label: t("system_log.参数"), prop: "params" },
    { label: t("system_log.异常"), prop: "exceptionDetail" },
  ];
  if (props.logType === 2 || props.logType === 4) {
    list.unshift({ label: t("system_log.商户名"), prop: "tenantName" + locale.value });
  }
  return list;
});

const handleConfirm = () => {
  handleClose();
};
const handleClose = () => {
  emit("update:show", false);
};
</script>
<style lang="scss" scoped>
.color-666666 {
  color: #666666;
}
.color-000000 {
  color: #000000;
}
</style>
